<template>
  <view>
    <uni-card
      :title="data.title"
      :isFull="true"
      :sub-title="
        new Date(parseInt(data.start_date))
          .toLocaleString()
          .replace(/:\d{1,2}$/, ' ')
      "
    >
      <view class="uni-body">
        <view class="mes">
          <view class="wexin">
            发起人: <span>{{ initiator }}</span>
          </view>
          <view class="inter">
            发起人电话: <span>{{ data.phone }} </span></view
          >
          <view class="age">
            商品名称: <span>{{ data.shop_name }}</span>
          </view>
          <view class="sex"
            >商品价格: <span>{{ data.price }}</span></view
          >
          <view class="overdate">
            结束日期:
            <span>{{
              new Date(parseInt(data.over_date))
                .toLocaleString()
                .replace(/:\d{1,2}$/, " ")
            }}</span>
          </view>
          <view class="note">
            注意事项: <span>{{ data.description }}</span>
          </view>
        </view>

        <div class="imagelist">
          <div class="item" v-for="item in data.imgList" :key="item">
            <image :src="item" mode="scaleToFill" @click="preViewImg" />
          </div>
        </div>
      </view>
      <button @click="open">加入团购</button>
    </uni-card>
    
    <uni-section title="参团列表" type="line"/>
    <uni-list>
      <uni-list-item
        v-for="item in userlist"
        :key="item._id"
        :title="item.name"
        :note="new Date(parseInt(item.date))
            .toLocaleString()
            .replace(/:\d{1,2}$/, ' ')"
        showArrow
      />
    </uni-list>

    <uni-popup ref="popup" type="bottom">
      <uni-section title="个人信息" type="line" />
      <view class="content">
        <uni-forms
          class="forms"
          ref="valiForm"
          :rules="rules"
          :modelValue="valiFormData"
        >
          <uni-forms-item label="姓名" required name="name">
            <uni-easyinput
              v-model="valiFormData.name"
              placeholder="请输入姓名"
            />
          </uni-forms-item>
          <uni-forms-item label="手机号" required name="phone">
            <uni-easyinput
              v-model="valiFormData.phone"
              placeholder="请输入手机号码"
            />
          </uni-forms-item>
          <uni-forms-item label="备注信息" name="introduction">
            <uni-easyinput
              type="textarea"
              placeholder="请输入备注信息"
              v-model="valiFormData.note"
            />
          </uni-forms-item>
          <button
            type="primary"
            button-hover="{background-color: #00a870; opacity: 0.7;}"
            @click="submit('valiForm')"
          >
            加入团购
          </button>
        </uni-forms>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";

const id = ref("");
const db = uniCloud.database();
const data = ref("");
const initiator = ref(""); // 发起人

const userlist = ref([])

const popup = ref("");
const open = () => {
  popup.value.open();
};

// 校验表单数据
const valiFormData = ref({
  name: "",
  phone: "",
  note: "",
  date: new Date().getTime(),
  shop_id: ""
});

// 校验表单
// 校验规则
const rules = ref({
  name: {
    rules: [
      {
        required: true,
        errorMessage: "姓名不能为空",
      },
    ],
  },
  phone: {
    rules: [
      {
        required: true,
        errorMessage: "手机号不能为空",
      },
      {
        format: "number",
        errorMessage: "手机号只能是数字",
      },
    ],
  },
});

const valiForm = ref("");
const submit = () => {
  uni.showLoading({
    title: "加载中...",
    mask: true,
  });
  valiForm.value
    .validate()
    .then(() => {
      db.collection("cont-shop-userlist")
        .add(valiFormData.value)
        .then(() => {
          popup.value.close();
          uni.showToast({
            title: "参团成功",
          });
        })
        .catch(() => {
          uni.showToast({
            title: "参团失败, 请检查网络",
            icon: "none",
            mask: true,
          });
        });
    })
    .catch(() => {
      return;
    });
};

const getUserlist = (id) => { 
  db.collection('cont-shop-userlist').where({ 
    shop_id: id
  }).get().then(res => { 
    userlist.value = res.result.data
  }).catch(() => { 
    uni.showToast({
        title: "加载失败, 请检查网络",
        icon: "none",
        mask: true,
      });
  })
}

onLoad((id) => {
  id.value = id.id;
  valiFormData.value.shop_id = id.id

  getUserlist(id.id)

  uni.showLoading({
    title: "加载中...",
    mask: true,
  });

  db.collection("cont-shop")
    .where({ _id: id.value })
    .get()
    .then((result) => {
      data.value = result.result.data[0];

      // 连表查询, 获取发起人信息
      const user_id = db
        .collection("uni-id-users")
        .field("_id, nickname")
        .getTemp();
      const cont_shop = db.collection("cont-shop").field("user_id").getTemp();
      db.collection(user_id, cont_shop)
        .where({
          "_id._value": result.result.data[0].user_id,
        })
        .get()
        .then((res) => {
          initiator.value = res.result.data[0].nickname;
        })
        .catch((err) => {
          uni.showToast({
            title: "加载失败, 请检查网络",
            icon: "none",
            mask: true,
          });
        });

      uni.hideLoading();
    })
    .catch((err) => {
      uni.showToast({
        title: "加载失败, 请检查网络",
        icon: "none",
        mask: true,
      });
    });
});
</script>

<style lang="scss" scoped>
button {
  background-color: #00a870;
  color: white;
}
.content {
  background-color: #fff;
  padding: 20rpx;
}
</style>